<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<script src="vue2.0.js"></script>
	<style>
		body {
			color: #fff;
		}

		#demo {
			background: red;
		}

		#demo1 {
			width: 100px;
			height: 100px;
			background: blue;
		}

		#demo2 {
			width: 100px;
			height: 100px;
			background: green;
		}

		#error {
			color: red;
		}

		#testTarget {
			color: #000;
			background: #0b97c4;
		}

		#testTarget span {
			display: inline-block;
			padding: 10px;
			background: #abcdef;
		}
	</style>
</head>
<body>
<div id="app">
	<div id="demo">
		<ul>
			<li v-for="(item,index) in list"
					v-tap="{ methods:args , index : index, item:item }"
			>
				{{item.name}}---{{item.age}}
			</li>
			<li>
				这个是测试传入参数的demo
			</li>
		</ul>
	</div>

	<p id="testTarget" v-tap="{ methods:target }">
		我绑定了事件(点击我target是我,currentTarget也是我)
		<span id="target1">点击我target是我,currentTarget是父元素</span>
		<span id="target2">点击我target是我,currentTarget是父元素</span>
	</p>

	<a href="http://www.baidu.com" v-tap>I'm a tag</a>
	<a href="test-href-2.0.html">aaaaaaaaaa</a>
</div>

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="vue-tap.js"></script>
<script>

  new Vue({
    el: "#app",
    data: {
      testStr: 'string',
      list: [{
        name: "name1",
        age: 18
      }, {
        name: "name2",
        age: 11
      }]
    },
    methods: {
      target: function (params) {
        console.log(params.event.target)
        console.log(params.event.currentTarget)
      },
      args: function (params) {
        // v-for循环带参数的回调
        console.log('---params.event---', params.event)
        console.log('---params.tapObj---', params.tapObj);
        console.log('---params.index---', params.index)
        console.log('---params.item---', params.item)
        //params.tapObj 可获得 tap的一些参数
        //pageX,pageY,clientX,clientY,distanceX,distanceY
        //后面2个分别的手指可能移动的位置(以后可用于拓展手势)
      },
      callback: function (params) {
        //不带参数指令,params.event为event对象
//                console.log('---params.event---',params.event);
//                console.log('---params.tapObj---', params.tapObj);
      }
    }
  });
</script>
</body>
</html>